<template>
  <div>
    <el-drawer title="ユーザー情報" :visible.sync="drawer" direction="rtl">
      <div class="wrap">
         <div class="augi">
             <span class="img-box">
                <img :src="pic + userInfoData.pic" alt="">
                <span>{{userInfoData.nickname}}</span>
             </span>
         </div>
         <div>
             <span>媒体：</span>
             <span>{{getType}}</span>
         </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "userInfo",
  props: {
    data: {
      type: Object,
      default: () => {
        return false;
      },
    },
    media: {
        type: Array,
        default: () => {
            return []
        }
    },
    types: {
        type: Array,
        default:() => {
            return []
        }
    }
  },
  data() {
    return {
      drawer: false,
      userInfoData: {},
      pic: '/userupload/'
    };
  },

  mounted() {
    //   console.log(this.data,"oooo");
  },
  computed: {
      getMedia() {
          let arr = []
          if(this.media.length) {
              this.media.forEach(item => {
                  if(item.id == this.userInfoData.media) {
                      arr.push(item)
                  }
              })
          }
          return arr
      },
    getType() {
        let arr = [];
        let type = this.userInfoData.types.split(" ");
        if(this.types.length) {
            this.types.forEach((item,index) => {
                this.userInfoData.typebs
            })
        }
        return arr
    }
  },
  watch: {
      data(val) {
          if(val) {
              this.userInfoData = val;
          }
      },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.wrap {
    padding: 15px;
    .augi {
        text-align: center;
        margin: 0 auto;
        .img-box {
            width:80px;
            height:80px;
            border-radius: 100%;
            display: block;
            img {
                width: 100%;
                height: 100%;
                border-radius: 100%;
            }
        }
    }
}

</style>
